<div class="main_fr_mic" style="margin-bottom:10px;">
          <i class="glyphicon glyphicon-home"></i>
          <a href="admin/index">首页</a><span>></span>
          <a  class="active">权限管理</a><span>></span>
          <a class="active">分组管理</a>
</div>
 
<div id="interfaceList" class="main_fr_down over">
	<div class="main_fr_search over mb10">
		  <form id="search_submit" class="form-inline">
			  <div class="good_top22">
				  <span class="good_top021">条件查询</span>
				  <!-- <span class="good_top022">
				      <input type="button" onclick="search();" class="search_an01 anbg" value="查询">
		              <input type="reset" class="search_an01" value="取消">
				   </span> -->
			  </div>
			  <div class="main_fr_search_cx">
				分组名称<input id="title" name="group.name" placeholder="请输入分组名称" type="text" class="srk" style="width:200px;"/>
              	状态<select name="group.status" class="srk" style="width:200px;">
              		<option value="">请选择状态</option>
              		<option value="1">开启</option>
              		<option value="0">禁用</option>
              	</select>
              	<input type="button" onclick="search();" class="search_an01 anbg" value="查询">
			  </div>
		  </form>
	</div>
	 
	<div class="sh_search over mb10">
		<div class="over sh_search_table">
			
	<div class="over mb10" style=" position:relative;">
		<div class="good_top22" style="margin-bottom: 0px;">
		  <span class="good_top021">分组列表</span>
		  <span class="good_top022">
		  	 @@if (ac(session.userId, 'group/update')){
				<input type="button" onclick="update(0);" class="search_an01" value="新增">
		 	 @@}
		   </span>
		  </div> 
	</div>
	<table class="table table-bordered table-hover">
		<thead  class="table_heaer">
			<tr class="text-center">
			<th>编号</th>
				<th>分组名称</th>
				<th>描述</th>
				<th>权限</th>
				<th>状态</th>
				<th>操作</th> 
			</tr>
		</thead>
		<tbody id="projectTable">
		</tbody>
	</table>
	</div>
			<div id="pages" class="text-right"></div>
	</div>
	
</div>

<!--  弹出层div-->
<div id="addFormDiv" class="hide" style="padding-top:15px;">
	<form class="form-horizontal" id="addForm">
		<input type="hidden" id="id" name="group.id">
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">分组名称</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="name" placeholder="请输入分组名称" name="group.name" minlength="2"  maxlength="10" required>
			</div>
		</div>
		<div class="form-group">
			<label for="exampleInputEmail2" class="col-sm-2 control-label">描述</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="des" placeholder="请输入描述" name="group.des" minlength="2"  maxlength="50" required>
			</div>
		</div>
		<div class="form-group">
			<label for="exampleInputEmail2" class="col-sm-2 control-label">状态</label>
			<div class="col-sm-9">
			<select id="status" name="group.status" class="form-control" style="width:200px;">
              		<option value="1">开启</option>
              		<option value="0">禁用</option>
              	</select>
			</div>
		</div>
		<div class="form-group">
		<label for="exampleInputEmail2" class="col-sm-2 control-label"></label>
			<div class="col-sm-9">
			<button type="submit" class="btn btn-success">立即提交</button>
			<button type="reset" class="btn btn-default">重置</button>
			</div>
		</div>
		
	</form>
</div>

<div id="actList" class="row hide" style="margin-left: 0px; margin-right: 0px;">
	<div class="panel panel-primary">
			<div class="panel-body">
			<div id="privilegeTreeDiv">
				<div class="col-md-12">
				<input type="hidden" id="groupid">
					<div class="panel panel-info">
					  	<div class="panel-heading">权限树</div>
						<div id="menuTree" class="ztree panel-body">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div> 
<!-- 在这里引入本页面需要的js -->
 
<script>
function userList(data) {
	var dataStr = "";
	$.each(data, function(i, v) {
		if(v.description==null){
			v.description=="";
		}
		dataStr += '<tr>';
		dataStr += '<td>' + v.id + '</td>';
		dataStr += '<td>' + v.name + '</td>';
		dataStr += '<td>' + v.des + '</td>';
		
		dataStr += '<td>';
		 @@if (ac(session.userId, 'group/addGroupMenu')){
				dataStr += '<a href="javaScript:menu(' + v.id + ');" class="btn btn-default">' + '权限' + '</a>';
		 @@}
		dataStr += '</td>'; 
		if(v.status==0){
			dataStr += '<td>禁用</td>';
		}else if(v.status==1) {
			dataStr += '<td>开启</td>';
		} 
		dataStr += '<td>';
		 @@if (ac(session.userId, 'group/update')){
				dataStr += '<a href="javaScript:update(' + v.id + ');" class="btn btn-default">' + '编辑' + '</a>';
		 @@}
		 @@if (ac(session.userId, 'group/del')){
				dataStr += '<a recordId="' + v.id + '" class="btn btn-default deleteButton">' + '删除' + '</a>';
		 @@}
		dataStr += '</td>'; 
		 
		dataStr += '</tr>';
	});
	$("#projectTable").html(dataStr);
	$("#projectTable .deleteButton").click(function() {
		clickDelete($(this));
		return false;
	})
}
function pageChange(curr) {
	$.get("group/list?curr="+curr, $("#search_submit").serialize(), function(data) {
		userList(data.content.list);
		laypage({
		    cont: $('#pages'), //容器。值支持id名、原生dom对象，jquery对象,
		    pages: data.content.totalPage, //总页数
		    skip: true, //是否开启跳页
		    skin: '#4599e0',
		    curr: data.content.pageNumber,
		    groups: 3, //连续显示分页数
		    jump: function(obj, first) {
		    	if(!first){ //一定要加此判断，否则初始时会无限刷新
		    		pageChange(obj.curr);
		    	}
		    }
		});
	});
}
pageChange(1);
function search(){
	pageChange(1);
}
var index;
$.validator.setDefaults({
    submitHandler: function() {
    	 $.post('group/update', $("#addForm").serialize(), function(data){
    		if(data.code==0){
    			layer.msg("保存成功！");
    			layer.close(index);
    			search();
    		}else{
    			layer.msg("保存失败！");
    			return false;
    		}
    		
    	}) 
    }
});
$().ready(function() {
    $("#addForm").validate();
});
function update(id) {
	var tit = "新增分组信息";
	if(id != 0){
		$.post("group/getInfo",{id:id},function(data){
			if(data.code==0){
				//layer.msg("获取信息成功！");
				for (var key in data.content){
					$("#"+key).val(data.content[key]);
				}
			}else{
				layer.msg("获取信息失败！");
				return false;
			}
		})
		tit = "修改分组信息";
	}else{
		document.getElementById("addForm").reset();
		$("#id").val("");
	} 
 	$("#addFormDiv").removeClass("hide");
	index=layer.open({
		type : 1,
		area: ['30%','40%'],
		title : tit,
		content : $("#addFormDiv"),
		btn: ['关闭'],
		yes: function(index, layero) {
			//layer.msg("已关闭");
			$("#addFormDiv").addClass("hide");
			layer.close(index);
		} 
	})
};
function clickDelete(obj) {
	// 给删除按钮注册事件
	// 获取当前记录的信息写入
	if(confirm("确定要删除该分组吗？")){
		var recordId = obj.attr("recordId");
		$.get("group/del", {"id":recordId}, function(data) {
			if (data.code == 0) {
				obj.closest("tr").remove();
				layer.msg("删除成功！");
			}else{
				layer.msg("删除失败！");
				return false;
			} 
		})
	}
}
/* -------------------------------------------------------------------------- */
function menu(id) {
		$("#actList").removeClass("hide");
		$("#groupid").val(id);
		var zTree = $.fn.zTree.getZTreeObj("menuTree");
		zTree.checkAllNodes(false);//取消全部勾选 
		$.post("group/getGroupMenu", {"groupid":id}, function(data) {
			if (data.code == 0) {
				if(data.content != null){
				 $.each(data.content, function(i, v) {
					 var node = zTreeObj.getNodeByParam("id", v.menuid, null);//获取节点
					 zTreeObj.checkNode(node,true,false, false);//勾选节点
				 })
				}
			}else{
				layer.msg("获取数据失败！");
				return false;
			} 
		})
		layer.open({
			type : 1,
			area: ['40%','50%'],
			title : '设置分组权限',
			content : $("#actList"),
		
			cancel: function(index, layero) {
				layer.close(index);
			},
			
		})
	};

</script>
 
<script>
//权限树 
var zTreeObj, zTreeObj2;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting1 = {
	data: {
		simpleData: {
			enable: true,
			pIdKey: "pid",
			rootPId: 0
		}
	},
	check: {
		enable: true,
		chkStyle: "checkbox",
		chkboxType: { "Y": "ps", "N": "s" }
	},
	view: {
		selectedMulti: false,
		showIcon: true,
		fontCss: {
		}
	},
	callback: {
		onClick: onClick,
		beforeCheck: beforeCheck,
		onCheck: onCheck
	}
};
var code, log, className = "dark";
function beforeCheck(treeId, treeNode) {
	className = (className === "dark" ? "":"dark");
	 if(confirm("确认要修改该权限吗？")){
		 return (treeNode.doCheck !== false);
	  }
	 return false; 
}
function onCheck(e, treeId, treeNode) {
	 var groupid = $("#groupid").val();
	 $.post("group/addGroupMenu", {groupid:groupid,menuid:treeNode.id}, function(data) {
		if(data.code==0){
			layer.msg("修改成功！");
		}else{
			layer.msg("修改失败！");
			return false; 
		}
	}) 
}		
function onClick(event, treeId, treeNode) {
	zTreeObj.expandNode(treeNode);
} 
 $(document).ready(function(){
	 init();
}); 
 function init(){
	 var setting2 = setting1;
	 $.get("group/getGroupList", function(data){
			var t1=[],parentMenu='';
			$.each(data.content, function(i, v) {
				if (v.pid == 0) {
					parentMenu += '<option value=' + v.id + '>' + v.name + '</option>';
				}
				t1.push(v);
			})
		   	zTreeObj = $.fn.zTree.init($("#menuTree"), setting2, t1);
		    zTreeObj.checkAllNodes(false); 
		   	zTreeObj.expandAll(true);
		   	//setting2.check.chkboxType.Y="p";
		   	$("#parentMenu").append(parentMenu);
		});
 }
</script>